<template>
	<view>
		<view class="goods-item">
		  <view class="left">
        <radio v-if="showRadio" :checked="good.goods_state" color="#c00000" @click="rChange"/>
		    <image :src="good.goods_big_logo === '' ? defaultPic : good.goods_big_logo" class="goods-pic" @click="gotoDetail(good.goods_id)"></image>
		  </view>
		  <view class="goods-item-right">
		    <view class="goods-item-title"  @click="gotoDetail(good.goods_id)">{{good.goods_name}}</view>
		    <view class="goods-item-bottom">
		      <view class="price"  @click="gotoDetail(good.goods_id)">￥{{good.goods_price | priceZero }}</view>
          <uni-number-box v-if="showCheck" :min="1" :value="good.goods_count" @change="bindChange" ></uni-number-box>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 空白图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			}
		},
    props: { // 接收外界传进来的商品属性
      good: {
        type: Object,
        defaul: {}
      },
      showRadio:{ // 控制单选显示隐藏
        type: Boolean,
        defaul: false
      },
      showCheck: {
        type: Boolean,
        defaul: false
      }
    },
    filters:{
      priceZero (val) { // 价格后两位小数点
        return Number(val).toFixed(2)
      }
    },
    methods: {
      gotoDetail (id) { // 跳转到详情页面
        uni.navigateTo({
          url: '../../subpkg/goods_detail/goods_detail?goods_id=' + id
        })
      },
      rChange (item) { // 修改状态
        this.$emit('radio-change', {
          goods_id: this.good.goods_id,
                // 商品最新的勾选状态
          goods_state: !this.good.goods_state
        })
      },
      bindChange (val) { // 修改数量
        this.$emit('numChange', {
          goods_id: this.good.goods_id,
                // 商品最新的勾选状态
          goods_count: val - 0
        })
      }
    }
	}
</script>

<style lang="scss">
  .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.goods-item {
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;
  .goods-pic {
     width: 100px;
     height: 100px;
     display: block;
  }
  .goods-item-right {
    display: flex;
    width: 100%;
    margin-left: 5px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .goods-item-title {
      font-size: 13px;
    }
      .price{
        font-size: 16px;
        color: #c00000;
      }
  }
}
.goods-item-bottom {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
</style>
